<template>
  <div id="poster">

    <el-form class="register-container" :model="registerForm" label-position="left" status-icon :rules="rules"
      ref="registerForm" label-width="0px">

      <h3 class="register_title">
        系统注册
        <el-button @click="ToLogin()">去登录</el-button>
      </h3>


      <div>

        <el-form-item label="" prop="userName">
          <el-input type="text" v-model="registerForm.userName" placeholder="请设置你的用户名：" prefix-icon="el-icon-user-solid">

          </el-input>
        </el-form-item>
      </div>


      <div>

        <el-form-item label="" prop="password">
          <el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="请设置你的密码："
            prefix-icon="el-icon-s-goods">
          </el-input>
        </el-form-item>

      </div>

      <div>

        <el-form-item label="" prop="checkPass">
          <el-input type="password" v-model="registerForm.checkPass" autocomplete="off" placeholder="请确认你的密码："
            prefix-icon="el-icon-warning">
          </el-input>
        </el-form-item>
      </div>


      <el-form-item>
        <el-button type="primary" style="background-color: #505458" @click="submitForm(registerForm)">注册</el-button>
        <el-button @click="resetForm(registerForm)">重置</el-button>
      </el-form-item>


    </el-form>



  </div>
</template>
  
<script>


export default {
  name: 'Register',
  data() {

    var checkUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
    };

    var validatePass = (rule, value, callback) => {
      //首先判断 value 的值是否为空字符串
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        //首先检查 this.registerForm.checkPass 是否不为空。
        if (this.registerForm.checkPass !== '') {
          //密码字段验证通过后，会立即触发确认密码字段的验证，以确保两个密码字段的一致性和有效性。
          this.$refs.registerForm.validateField('checkPass');
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };


    return {
      //表单需要绑定的数据
      registerForm: {
        password: '',
        checkPass: '',
        userName: ''
      },
      Form: {
        password: '',
        userName: ''
      },

      //三组验证规则
      rules: {
        //在用户名字段设置checkUserName的验证方法，blur表示失去焦点触发验证
        userName: [
          { validator: checkUserName, trigger: 'blur' },
          { validator: checkUserName, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]

      }
    };
  },


  methods: {
    //提交
    submitForm(registerForm) {
      //发送给后端的请求
      this.Form.userName = this.registerForm.userName;
      this.Form.password = this.registerForm.password;
      console.log(this.Form)
      //发送给后端的请求
      this.axios.post('http://localhost:9999/sys/register', this.Form).then(response => {
        let data = response.data;

        if (data.code == "20000") {
          this.registerForm = {};
          this.$message({
            message: data.message,
            type: 'success'
          })
        }else{
          this.registerForm = {};
          this.$message({
            message: data.message,
            type: 'error'
          })
        }

      })

    },

    //重置
    resetForm() {
      this.$refs.registerForm.resetFields();
    },

    ToLogin() {
      this.$router.push({ path: '/' })
    }
  }
}
</script>


<style>
#poster {
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  margin: 0px;
  padding: 0px;
}


.register-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 30px;
  /* 设置统一的内边距值 */
  background-color: #5791c0;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

}

.register_title {
  margin: 0 auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>